<template>
  <dv-border-box-12 class="box">
    <div class="flex justify-between items-center px-4 mb-2">
      <h3 class="text-white text-lg">{{ flag ? '荣誉园地(全部)' : '荣誉园地(各级组织)' }}</h3>
      <div @click="handleChange"
        class="cursor-pointer hover:opacity-80 transition-opacity duration-300 text-white text-center"
        style="height: 20px">
        切换图表
      </div>
    </div>
    <EchartsUI ref="chartRef" class="w-full" style="height: calc(100% - 50px)" />
  </dv-border-box-12>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import {getHonorYard} from '#/api/largeVisualScreen/smallProgram';


let chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

// 全部荣誉数据（饼图）
const option1 = ref({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item'
  },
  legend: {
    left: 'center',
    textStyle: {
      color: '#fff'
    },
    left: '5%',
    orient: 'vertical',
  },
  series: [
    {
      name: '荣誉类型',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '团体荣誉' },
        { value: 735, name: '个人荣誉' },
        { value: 580, name: '项目荣誉' },
        { value: 484, name: '特殊贡献' },
        { value: 300, name: '其他荣誉' }
      ]
    }
  ]
});

// 各级组织荣誉数据（圆形图）
const option2 = ref({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      // 模拟各组织的数据
      const orgData = {
        '团体荣誉': [
          { name: '组织A', value: 30 },
          { name: '组织B', value: 25 },
          { name: '组织C', value: 20 }
        ],
        '个人荣誉': [
          { name: '组织A', value: 40 },
          { name: '组织B', value: 35 },
          { name: '组织C', value: 30 }
        ],
        '项目荣誉': [
          { name: '组织A', value: 20 },
          { name: '组织B', value: 15 },
          { name: '组织C', value: 10 }
        ],
        '特殊贡献': [
          { name: '组织A', value: 15 },
          { name: '组织B', value: 12 },
          { name: '组织C', value: 8 }
        ],
        '其他荣誉': [
          { name: '组织A', value: 10 },
          { name: '组织B', value: 8 },
          { name: '组织C', value: 5 }
        ]
      };
      
      let result = `${params.name}<br/>`;
      if (orgData[params.name]) {
        orgData[params.name].forEach(item => {
          result += `${item.name}: ${item.value}个<br/>`;
        });
      }
      return result;
    }
  },
  legend: {
    left: '5%',
    orient: 'vertical',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: '荣誉类型',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['60%', '50%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}',
        color: '#fff'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: [
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' }
      ]
    }
  ]
});



const flag = ref(true);

// 切换图表显示
const handleChange = () => {
  flag.value = !flag.value;
  renderEcharts(flag.value ? option1.value : option2.value);
};

// 初始化图表
onMounted(() => {
  getHonorYard().then((res)=>{
  console.log("荣誉园地数据",res);
});
  renderEcharts(option1.value);
});
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>
